<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>职位详情</title>
    <!-- 引入通用css -->
    <link rel="stylesheet" href="../common/public.css" />
    <link rel="stylesheet" href="../common/ui/vant-ui/ui.css" />
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>
    <!-- 引入http-vue-loader -->
    <script src="../common/js/vueLoader.js"></script>
    <!-- 引入样式vant.js -->
    <script src="../common/ui/vant-ui/ui.js"></script>

    <!-- 地图 -->
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=MosSE8eTXhMdg0ZtRGAdH4GPfzsD7Lqd"
    ></script>
    <!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script> -->
  </head>
  <body>
    <div id="app">
      <main-top></main-top>
      <div class="main">
        <div class="topCard">
          <!-- 左 -->
          <div class="">
            <div class="fs14 dis500">
              {{ company.status==10?'招聘中':'已结束' }}
            </div>
            <div class="flex aic mgt10">
              <div class="fwb fs24 mgr20">{{ company.jobName }}</div>
              <div class="fs18 fwb cr">{{ company.money }}</div>
            </div>
            <div class="fs14 flex mgt10">
              <div>
                <van-icon name="location-o" /><span class="mgl8"
                  >{{ company.city }}</span
                >
              </div>
              <div class="mgl8 mgr8">
                <van-icon name="bag-o" /><span class="mgl8"
                  >{{ company.year }}</span
                >
              </div>
              <div>
                <van-icon name="todo-list-o" /><span class="mgl8"
                  >{{ company.xueli }}</span
                >
              </div>
            </div>
            <div class="mgt10 btngroup flex dis500">
              <div @mouseenter="xinshow=true" @mouseleave="xinshow=false">
                <van-button class="btn b1">
                  <div class="flex">
                    <div v-if="xinshow">
                      <van-icon name="like" class="icon" />
                    </div>
                    <div v-else><van-icon name="like-o" class="icon" /></div>
                    <div class="mgl8">感兴趣</div>
                  </div>
                </van-button>
              </div>
              <van-button class="btn b2">立即沟通</van-button>
            </div>
          </div>
          <!-- 右 -->
          <div class="fs14 flex column jcsa">
            <div class="">
              <main-tag
                :tagList="company.tag"
                class="tagGroup van-ellipsis"
              ></main-tag>
            </div>
            <div class="flex dis500">
              <div class="mgr40">
                <van-icon name="notes-o" size="16" />填写在线简历
              </div>
              <div><van-icon name="orders-o" size="16" />上传附件简历</div>
            </div>
          </div>
        </div>
        <div class="flex mcolumn">
          <!-- 左 -->
          <div>
            <div class="leftCard flex column flexreserve">
              <div>
                <div class="flex jcsb">
                  <div class="fwb mgt10">职位描述:</div>
                  <div class="fs14 flex dis500">
                    <span class="mgr20 txtActive"
                      ><van-icon name="chat-o" />微信扫码分享</span
                    >
                    <span class="txtActive"
                      ><van-icon name="warn-o" />举报</span
                    >
                  </div>
                </div>
                <main-tag
                  :tagList="company.jsbTag"
                  class="tagGroup van-ellipsis mgt20"
                ></main-tag>
                <div class="pah fs14">{{ company.jobResponsibility }}</div>
              </div>
              <div>
                <div class="mgt20 fwb">薪资详情</div>
                <div class="pah fs14">{{ company.jobQualification }}</div>
              </div>
              <div class="line"></div>
              <!-- 招聘者 -->
              <div class="flex w100 fs14 jcsb aic">
                <div class="flex">
                  <div class="navar"></div>
                  <div class="flex column jcse">
                    <div>
                      <span>{{ company.recruiter.name }}</span>
                      <span class="cr"><van-icon name="fire-o" /></span>
                      <span
                        >{{ company.recruiter.isActive?'刚刚活跃':'' }}</span
                      >
                    </div>
                    <div>
                      <span>{{ company.recruiter.company }}</span>
                      <span>{{ company.recruiter.job }}</span>
                    </div>
                  </div>
                </div>
                <div class="ndis500">
                  <div class="mbtn">立刻沟通</div>
                </div>
              </div>
            </div>
            <div class="leftCard">
              <div class="fwb">公司介绍</div>
              <div class="pah fs14">{{ company.companyMsg.title }}</div>
              <div class="dis500 flex column">
                <div class="fwb mgt10">工商消息</div>
                <card-gsmsg :msglist="company.companyMsg"></card-gsmsg>
              </div>
              <div class="fwb mgt10">公司地址</div>
              <div id="map" class="map">
                <div class="inputCard">1111</div>
              </div>
            </div>
            <div class="leftCard pd10 dis500 flex column">
              <div class="flex jcsb">
                <div class="fwb">看过该职业的人还看了</div>
                <div class="prColor">更多职位</div>
              </div>
              <div class="cardBd mgt10">
                <card-work :iszoom="true"></card-work>
              </div>
            </div>
          </div>
          <!-- 右 -->
          <div class="flex column right">
            <div class="rightCard dis500 column">
              <div class="rightTop"><span class="pd10">公司基本信息</span></div>
              <div class="pd10">
                <div class="flex aic mgt10">
                  <div class="navar mgr8"></div>
                  <div class="van-ellipsis gswidth">
                    {{ company.companyMsg.name }}
                  </div>
                </div>
                <div class="mgt20">
                  <div class="">
                    <van-icon name="friends-o" size="18" /><span
                      class="mg10 fs14"
                      >{{ company.companyMsg.financing}}</span
                    >
                  </div>
                  <div class="mgt10 mgb10">
                    <van-icon name="friends-o" size="18" /><span
                      class="mg10 fs14"
                      >{{ company.companyMsg.registrationAuthority}}</span
                    >
                  </div>
                  <div class="">
                    <van-icon name="friends-o" size="18" /><span
                      class="mg10 fs14"
                      >{{ company.companyMsg.peopleNum}}</span
                    >
                  </div>
                </div>
                <div class="flex jcc mgt20">
                  <div class="lkbtn">查看全部职位</div>
                </div>
              </div>
            </div>
            <div class="rightCard mgt10">
              <div class="rightTop">
                <div class="pd8 flex jcsb aic">
                  <div>相似职位</div>
                  <div class="fs14 prColor dis500 aic">
                    更多相似职位<van-icon name="play" />
                  </div>
                </div>
              </div>
              <div class="pd10">
                <card-dbjob></card-dbjob>
                <div class="flex jcc mgt20">
                  <div class="lkbtn">查看全部职位</div>
                </div>
              </div>
            </div>
            <div class="rightCard mgt10 dis500">
              <div class="pd10 imgCard">广告招租</div>
            </div>
            <div class="rightCard mgt10 dis500">
              <div class="pd10 imgCard">广告招租</div>
            </div>
          </div>
        </div>
      </div>
      <main-footer></main-footer>
    </div>
  </body>
</html>
<style>
  /* 顶部 */
  .topCard {
    /* height: 120px; */
    display: flex;
    justify-content: space-between;
    border: 1px solid #cec8c865;
    padding: 10px;
    margin: 10px 0;
    border-radius: 10px;
    /* max-height: 100%; */
    -webkit-text-size-adjust: none;
  }
  .btn {
    border-radius: 10px;
    margin-right: 15px;
  }
  .b1 {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
  }
  .b2 {
    background-color: var(--primary-color);
    color: #fff;
  }
  /* 左 */
  .tagGroup {
    width: 300px;
    height: 25px;
  }
  .leftCard {
    border: 1px solid #cec8c865;
    width: 1000px;
    padding: 20px;
    margin: 10px 0;
    border-radius: 10px;
  }

  .txtActive:hover {
    color: var(--primary-color);
  }
  .line {
    height: 2px;
    background-color: #eeeeee65;
    margin: 20px 0;
  }
  /* 地图 */
  .map {
    width: 100%;
    margin: 10px;
    height: 300px;
    position: relative;
  }
  /* 右 */
  .rightCard {
    border: 1px solid #cec8c865;
    width: 300px;
    margin: 10px 0;
    border-radius: 10px;
  }
  .gswidth {
    font-size: 14px;
    width: 160px;
  }
  .rightTop {
    border-radius: 10px;
    background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
    line-height: 35px;
  }
  .imgCard {
    width: 100%;
    height: 100px;
  }
  .main {
    width: 1400px;
    margin: 0 auto;
  }
  .mcolumn{
    justify-content: space-between;
  }
  @media (max-width: 500px) {
    .flexreserve {
      flex-direction: column-reverse;
    }
    .main {
      width: 100%;
    }
    .leftCard {
      width: 85%;
      margin: 10px;
    }
    .topCard {
      width: 90%;
      margin: 10px;
      flex-direction: column;
    }
    .tagGroup:first-child {
      width: 100%;
      margin: 15px 0;
    }
    .map {
      margin: 10px 0;
    }
    .mcolumn {
      flex-direction: column;
    }
    .right {
      width: 100%;
      margin: 10px;
    }
    .rightCard {
      width: 93%;
      margin: 10px;
    }
  }
</style>
<script>
  Vue.use(httpVueLoader);
  new Vue({
    el: "#app",
    data: {
      xinshow: false,
      company: {
        status: 10,
        jobName: "内盛经理",
        money: "15k-20k",
        city: "北京",
        year: "1-3年",
        xueli: "本科",
        tag: [
          "五险一金",
          "补充医疗保险",
          "加班补助",
          "年终奖",
          "股票期权",
          "带薪年假",
          "员工旅游",
          "零食下午茶",
          "公司团建",
        ],
        jsbTag: [
          "上市公司",
          "集团公司",
          "内部审计",
          "其他行业",
          "CPA",
          "教育培训行业",
          "连锁经营模式",
        ],
        jobResponsibility: `
             1 案说法撒发撒发撒阿萨发生法发是 撒飞洒发  啊撒飞洒发发送 啊 2 啊发送2 阿萨身份1 阿萨1
             2 324234  23423 f艾迪莎十多个萨格阿萨发生法发a
             3 23423阿发分公司公司的公司萨达给收到贵司的 给公司公司是    十大高手根深蒂固的是给导师公司的
             4 啊撒飞洒个法师撒发撒发撒23432532`,
        jobQualification: `
             1 案说法撒发撒发撒阿萨发生法发是 撒飞洒发  啊撒飞洒发发送 啊 2 啊发送2 阿萨身份1 阿萨1
             2 324234  23423 f艾迪莎十多个萨格阿萨发生法发a
             3 23423阿发分公司公司的公司萨达给收到贵司的 给公司公司是    十大高手根深蒂固的是给导师公司的
             4 啊撒飞洒个法师撒发撒发撒23432532`,
        recruiter: {
          name: "张安安",
          isActive: true,
          company: "王国撒啊",
          job: "主管",
        },
        companyMsg: {
          title: `
                万国体育深圳南山中心，位于深圳市南山区，成立于2011年10月。场馆面积4127平方米，拥有青少年击剑比赛和实战专用区、成人击剑训练区、体能区、体验区以及32条国际比赛标准剑道。
                万国体育深圳南山中心，主要面向5-12岁青少年儿童，提供不同年龄不同级别的击剑课程等，以及装备销售、赛事活动等服务。截止目前，本中心已累计服务学员17000+，受到家长广泛好评。
                `,
          financing: "不需要融资",
          peopleNum: "20-90人",
          name: "北京万国天骐体育股份有限公司",
          legalPerson: "邢大鹏",
          createdTime: "2006-08-09",
          enterpriseType: "股份有限公司（非上市、自然人投资或控股）",
          state: "存续",
          createdMoney: "7680万人民币",
          createdAd: "北京市朝阳区北辰东路8号院1号楼3层302号016",
          operatingTerm: "2006-08-09至-",
          city: "北京市",
          cityCode: "91110105792124596H",
          examineDate: "2022-10-25",
          oldName: "-",
          registrationAuthority: "北京市朝阳区市场监督管理局",
          industry: "4s/后市场",
          businessScope: `
                一般项目：法律咨询（不含依法须律师事务所执业许可的业务）；信息咨询服务（不含许可类信息咨询服务）；破产清算服务；标准化服务；咨询策划服务；
                社会稳定风险评估；信息系统运行维护服务；运行效能评估服务；数据处理服务；大数据服务；市场营销策划；融资咨询服务；技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广。（除依法须经批准的项目外，
                凭营业执照依法自主开展经营活动）许可项目：互联网信息服务；网络文化经营。（依法须经批准的项目，经相关部门批准后方可开展经营活动，具体经营项目以相关部门批准文件或许可证件为准）
                `,
        },
      },
    },

    components: {
      "main-top": httpVueLoader("../common/commpent/main/workTop.vue"),
      "main-footer": httpVueLoader("../common/commpent/main/mainFooter.vue"),
      "main-tag": httpVueLoader("../common/commpent/main/mainTag.vue"),
      "card-gsmsg": httpVueLoader("../common/commpent/ucard/gsmsgCard.vue"),
      "card-work": httpVueLoader("../common/commpent/ucard/workCard.vue"),
      "card-dbjob": httpVueLoader(
        "../common/commpent/ucard/comparejobCard.vue"
      ),
    },
    mounted() {
      this.getMap();
    },
    methods: {
      getMap() {
        var map = new BMapGL.Map("map"); // 创建地图实例
        // 一个点对象，包含坐标及名称
        const center = {
          name: "温州市人民政府",
          lng: "120.705832",
          lat: "28.00032",
        };
        var point = new BMapGL.Point(center.lng, center.lat); // 创建点坐标
        map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.setHeading(64.5); //设置地图旋转角度
        map.setTilt(73); //设置地图的倾斜角度
        // this.makePoint(map, center);
        this.addContrl(map, center);
        this.addmapTxt(map, center);
      },
      addContrl(map, data) {
        var opts = {
          anchor: BMAP_ANCHOR_TOP_RIGHT,
        };
        // 添加城市列表控件
        map.addControl(new BMapGL.CityListControl(opts));
        // 添加坐标控件
        map.addControl(new BMapGL.LocationControl(opts));
      },
      addmapTxt(map, data) {
        //添加坐标标注
        var point = new BMapGL.Point(data.lng, data.lat);
        var marker = new BMapGL.Marker(point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中

        //创建弹窗
        var opts = {
          width: 150, // 信息窗口宽度
          height: 50, // 信息窗口高度
          title: data.name, // 信息窗口标题
        };
        var infoWindow = new BMapGL.InfoWindow("xx公司", opts); // 创建信息窗口对象
        marker.addEventListener("click", function () {
          // 打开信息窗口
          map.openInfoWindow(infoWindow, map.getCenter());
        });

        //添加窗口文字
        // var point = new BMapGL.Point(data.lng, data.lat);
        // var content = "xxx公司";
        // var label = new BMapGL.Label(content, {
        //   // 创建文本标注
        //   position: point, // 设置标注的地理位置
        //   offset: new BMapGL.Size(-20, 3), // 设置标注的偏移量
        // });
        // label.setStyle({
        //   // 设置label的样式
        //   color: "red",
        //   fontSize: "18px",
        //   border: 'none',
        //   backgroundColor:'transparent',
        // });
        // map.addOverlay(label); // 将标注添加到地图中
      },
    },
  });
</script>
